<template>
  <div class="user-info-select">
    <uni-popup ref="popup" background-color="transparent" :is-mask-click="false" @change="change">
      <div class="main-content">
        <div>
          <div class="comp-content">
            <UserRole v-if="stepObj.code === 'role'" @select-change="selectChange" />
            <UserCounty v-if="stepObj.code === 'county'" @select-change="selectChange" />
          </div>
          <div class="btn-content">
            <button v-if="isLogin" type="primary" :disabled="!ableSubmit" :class="{ disable: !ableSubmit }" @click="submit">确定</button>
            <button v-if="!isLogin" type="primary" :disabled="!ableSubmit" :class="{ disable: !ableSubmit }" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确定</button>
          </div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
  import UserRole from './UserRole';
  import UserCounty from './UserCounty';
  import { getUserPhone, getLoginInfo } from '../../../api/common';
  import { saveUserCounty, saveUserRole } from '../../../api/index';
  import { getAppData } from '../../../utils/init';
  
  export default {
    name: 'UserInfoSelect',
    components: {
      UserRole,
      UserCounty,
    },
    props: {},
    data() {
      const appData = getAppData();
      const { userInfo } = appData;
      return {
        stepList: [
          { code: 'role', comp: UserRole },
          { code: 'county', comp: UserCounty },
        ],
        currentStep: 0,
        roleInfo: null,
        countyInfo: null,
        isLogin: false,
        userInfo,
      };
    },
    computed: {
      stepObj() {
        return this.stepList[ this.currentStep ];
      },
      ableSubmit() {
        const { stepObj } = this;
        return !!this[ `${stepObj.code}Info` ];
      },
    },
    mounted() {
      this.$nextTick(() => {
        this.popupShow(true);
      });
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        const appData = getAppData();
        this.isLogin = appData.isLogin;
      },
      close() {
        this.popupShow(false);
      },
      popupShow(isShow) {
        const popup = this.$refs.popup[ 0 ] || this.$refs.popup;
        if (isShow) {
          popup.open('bottom');
          return;
        }
        popup.close();
      },
      selectChange({ data }) {
        const { stepObj } = this;
        this[ `${stepObj.code}Info` ] = data;
      },
      async submit() {
        let success = false;
        const currentStep = this.currentStep + 1;
        const { stepList } = this;
        if (stepList[ currentStep ]) {
          success = await this.saveUserRole();
          if (success) {
            this.currentStep = currentStep;
          }
          return;
        }
        success = await this.saveUserInfo();
        if (success) {
          this.close();
        }
      },
      async saveUserRole() {
        const { roleInfo, userInfo } = this;
        console.log(userInfo, 123123);
        const param = {
          personId: userInfo.personId,
          roleId: roleInfo.value,
        };
        getApp().globalData.userInfo.roleId = param.roleId;
        const res = await saveUserRole(param);
        return res.code === 200;
        // if (res.code === 200) {
        //   this.close();
        // }
      },
      async saveUserInfo() {
        console.log(this.roleInfo, this.countyInfo, getAppData());
        const { countyInfo } = this;
        const appData = getAppData();
        const { userInfo } = appData;
        console.log(userInfo, 123123);
        const param = {
          personId: userInfo.personId,
          organId: countyInfo.organId,
          organName: countyInfo.organName,
        };
        getApp().globalData.userInfo.organName = param.organName;
        getApp().globalData.userInfo.organId = param.organId;
        const res = await saveUserCounty(param);
        return res.code === 200;
      },
      async getPhoneNumber(e) {
        const that = this;
        if (e.detail.errMsg === 'getPhoneNumber:ok') {
          uni.getProvider({
            service: 'oauth',
            success(data) {
              uni.login({
                provider: data.provider,
                async success(data) {
                  const obj = await that.getLoginInfo(data);
                  if (obj.existmobile < 1) {
                    const res = await getUserPhone({ ...e.detail, ...obj });
                    if (res.code === 200) {
                      this.isLogin = true;
                      getApp().globalData.userInfo.personId = res.data.personId;
                      that.submit();
                    }
                    return;
                  }
                  this.isLogin = true;
                  getApp().globalData.userInfo.personId = obj.personId;
                  that.submit();
                },
              });
            },
          });
        }
      },
      async getLoginInfo(data) {
        const param = {
          code: data.code,
        };
        let obj = {};
        const res = await getLoginInfo(param);
        if (res.code === 200) {
          obj = res.data;
        }
        return obj;
      },
      change(e) {
        if (!e.show) {
          setTimeout(() => {
            this.$emit('close');
          }, 500);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .user-info-select {
    .main-content {
      height: 70vh;
      > div {
        height: 100%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding-top: 30px;
        display: flex;
        flex-direction: column;
        background-color: #f4f6fa;
        .comp-content {
          flex: 1;
          overflow: hidden;
        }
        .btn-content {
          padding: 10px 15px;
          button {
            border-radius: 40px;
            background-color: #0669f0;
            transition: all 0.2s;
            &.disable {
              opacity: 0.5;
            }
          }
        }
      }
    }
  }
</style>
